<template>
  <div class="container">
    <div class="top">
      <img
        src="https://www.hymuseum.org.cn/uploadfiles/article_img/20200306/202003061029236624.png"
        alt
      />
    </div>
    <div class="wrapper">
      <div class="inner">
        <h3>亲子夜宿奇妙科技馆</h3>
        <div class="item">
          <span class="icon">活动时间：</span>
          <span>2020-03-25 15:03~03-26 15:03</span>
        </div>
        <div class="item">
          <span class="icon icon2">活动地点：</span>
          <span>金华市科技馆一楼大厅</span>
        </div>
        <div class="item">
          <a href="tel:176988888888">
            <span class="icon icon3">联系号码：</span>
            <span>176988888888</span>
            <i class="iconfont iconarrowRight"></i>
          </a>
        </div>
        <div class="item">
          <span class="icon icon4">报名人数：</span>
          <span>15/99 (人)</span>
        </div>
      </div>
    </div>
    <div class="content">
      <h3>活动详情</h3>
      <div
        class="content-inner"
      >讲解是知识和语言的高度综合艺术，其职业特点与组团社导游员有着根本的区别，它综合了教师、播音、演讲、话剧、表演等专业的技术手段，是专业性、知识性和艺术性的综合。讲解员处于一个特殊关键的岗位，她面对的是一个知识层...讲解是知识和语言的高度综合艺术，其职业特点与组团社导游员有着根本的区别，它综合了教师、播音、演讲、话剧、表演等专业的技术手段，是专业性、知识性和艺术性的综合。讲解员处于一个特殊关键的岗位，她面对的是一个知识层...讲解是知识和语言的高度综合艺术，其职业特点与组团社导游员有着根本的区别，它综合了教师、播音、演讲、话剧、表演等专业的技术手段，是专业性、知识性和艺术性的综合。讲解员处于一个特殊关键的岗位，她面对的是一个知识层...讲解是知识和语言的高度综合艺术，其职业特点与组团社导游员有着根本的区别，它综合了教师、播音、演讲、话剧、表演等专业的技术手段，是专业性、知识性和艺术性的综合。讲解员处于一个特殊关键的岗位，她面对的是一个知识层...讲解是知识和语言的高度综合艺术，其职业特点与组团社导游员有着根本的区别，它综合了教师、播音、演讲、话剧、表演等专业的技术手段，是专业性、知识性和艺术性的综合。讲解员处于一个特殊关键的岗位，她面对的是一个知识层...</div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.top {
  width: 100%;
  height: 230px;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
  }
}
.wrapper {
  background: #ebebeb;
  padding: 20px 13px;
  .inner {
    padding: 16px 15px 5px;
    margin-top: -30px;
    border-radius: 5px;
    background: #fff;
    position: relative;
    z-index: 3;
    h3 {
      font-size: 22px;
      color: #353535;
      text-align: center;
      margin-bottom: 10px;
    }
    .item {
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid #b5b5b5;
      overflow: hidden;
      .iconarrowRight {
        float: right;
      }
      .icon {
        padding-left: 30px;
        color: #9b9b9b;
        font-size: 14px;
        background: url(../.././img/activity/1.png) no-repeat;
        background-size: 21px 21px;
        background-position: center left;
      }
      .icon2 {
        background: url(../.././img/activity/2.png) no-repeat;
        background-size: 21px 19px;
        background-position: center left;
      }
      .icon3 {
        background: url(../.././img/activity/3.png) no-repeat;
        background-size: 21px 21px;
        background-position: center left;
      }
      .icon4 {
        background: url(../.././img/activity/4.png) no-repeat;
        background-size: 22px 20px;
        background-position: center left;
      }
      &:last-child {
        border: 0 none;
      }
    }
  }
}
.content {
  padding: 15px;
  h3 {
    color: #353535;
    font-size: 18px;
    margin-bottom: 20px;
  }
  .content-inner {
    line-height: 20px;
    color: #353535;
    font-size: 14px;
  }
}
</style>